<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="./css/base.css">
	<style>
		.crumbs {
			font-size: 14px;
			color: #ccc;
		}

		.content .item {
			margin-top: 10px;
			margin-bottom: 10px;
		}

		.content .item img {
			width: 100%;
			height: 100%;
			box-shadow: 0px 0px 10px #ccc;

		}

		.content .item .title:hover {
			text-decoration: underline;
			cursor: pointer;
		}


		.content .item div:first-child:hover img {
			opacity: 0.7;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
		}

		.content .item .intro {
			margin-top: 10px;
			color: #ccc;
			font-size: 14px;
		}
	</style>
</head>

<body>
	<div class="container">
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
						data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#" style="display:flex;">
						小罗的博客
					</a>
				</div>

				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

					<ul class="nav navbar-nav navbar-right">
						<li><a href="#">首页</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
								aria-haspopup="true" aria-expanded="false">分类 <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="/cate.html?id=2">html</a></li>
								<li><a href="/cate.html?id=2">css</a></li>
								<li><a href="/cate.html?id=2">javascript</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="/cate.html?id=2">mysql</a></li>
								<li><a href="/cate.html?id=2">Linux</a></li>
							</ul>
						</li>
						<li><a href="/tags.html">标签</a></li>
						<li><a href="/about.html">关于我</a></li>
					</ul>
				</div>
			</div>
		</nav>

		<div>
			<h4 class="crumbs" id="crumbs" style="text-align:left;"></h4>
		</div>

		<div class="content">
			<div class="artlist" id="artlist">
			</div>
		</div>

		<button type="button" class="btn  btn-block">查看更多</button>
		<hr>

		<div class="footer" style="text-align:center;font-size: 14px; color: #999;margin:10px 0;">
			首页 | 主站 | GitHub | created at 2020/02/4 | Powered by 小罗
		</div>
	</div>
</body>
<script src="./js/jquery.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.2/moment.js"></script>
<script type="text/javascript">
    let reg = /\?cate_id=(\d+)/
    let [,cate_id] = location.search.match(reg)
    async function  getCateArt(cate_id){
    	let result = await $.get('http://127.0.0.1:3000/api/fetchCate',{cate_id})
    	console.log(result)
    	let articleHtmls = ''
    	$("#crumbs").html(`当前位置：<a href="/">首页</a>  / ${result[0].cate_name} `)
    	result.forEach(item=>{
    		let {id,cate_id,cate_name,title,add_date,photo,host} = item
			add_date = moment(add_date).format('YYYY-MM-DD')
			let imgSrc = photo ? `${host}${photo}` : './image/logo.png'
			articleHtmls += `
				<div class='item row'>
					<div class="col-md-2">
						<a href="/detail.html?id=${id}"><img src="${imgSrc}" alt=""></a>
					</div>
					<div class="col-md-10">
						<div class="date "> ${add_date} 、分类：<a href="/cate.html?cate_id=${cate_id}">${cate_name}</a></div>
						<a href="/detail.html?id=${id}"><div class="title">${title}...</div></a>
						<div class="intro">${title}...</div>
					</div>
					<hr>
				</div>
			`;
    	})
    	$("#artlist").html(articleHtmls)
    }

    getCateArt(cate_id)

</script>

</html>